<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<!-- 引入插件 -->
		<script src="js/echarts.min.js"></script>
	</head>
	<style>
		/* 2.设置尺寸 */
		#chart1{
			width: 50%;
			height: 500px;
			border: 1px solid #000;
			display: inline-block;	/* 行内块级 */
		}
	</style>
	<body>
		<div id='app'>
			<!-- 1.准备画布 -->
			<div id="chart1"></div>
		</div>
		<script src="js/data.js"></script>
		<script>
			Vue.createApp({
				data(){
					return{
					
					}
				},
				mounted() {		//画布渲染完成
					this.chart1()	//4.调用画图方法
					
				},
				methods:{
					chart1(){	//3.画图方法
						var chartDom = document.getElementById('chart1');
						var myChart = echarts.init(chartDom,'dark');
						var option;
						
						option = {
						  tooltip: {
						    trigger: 'item'
						  },
						  legend: {
						    orient: 'vertical',
						    left: 'left'
						  },
						  series: [
						    {
						      name: 'Access From',
						      type: 'pie',
						      radius: '50%',
						      data: data.chart1,
							  label:{
								  formatter:'{b}:{c}({d}%)'
							  },
						      emphasis: {
						        itemStyle: {
						          shadowBlur: 10,
						          shadowOffsetX: 0,
						          shadowColor: 'rgba(0, 0, 0, 0.5)'
						        }
						      }
						    }
						  ]
						};
						
						option && myChart.setOption(option);
						
						//浏览器窗口尺寸变化时，图表也变化
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>